import { $getRechargeInfo, $recharDoCheck } from "@/api/transferReview/transferReview";
import { CardWithTitle } from "@/components/public/card/card";
import LForm, { LFormItem } from "@/components/public/lForm/lForm";
import Page from "@/components/public/page/page";
import useNavigator from "@/hooks/useNavigator";
import { message } from "ant-design-vue";
import { defineComponent, onMounted, reactive } from "vue";
import styles from "./auditing.module.less";

export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      form: {
        imgs: [],
        status: null,
        account_data: '',
        remark: '',
        isShow: true,
        verify_status:true,
      }
    })
    //取消
    const cancelHandler = () => {
      navigator.back();
    }

    //确认
    const confirmHandler = (done: any) => {
      if (!state.form.status) {
        message.error('请选择审核状态');
        done();
        return;
      }
      if (state.form.status === 1 && !state.form.account_data) {
        message.error('请输入充值金额');
        done();
        return;
      }
      $recharDoCheck({
        verify_status: Number(state.form.status),
        order_no: String(navigator?.route?.query?.order_no),
        amount: Number(state.form.account_data),
        remark: state.form.remark
      }).then((res: any) => {
        message.success('审核提交成功')
        navigator.back();
      }).finally(() => { done() })
    }

    onMounted(() => {
      state.form.verify_status = Number(navigator?.route?.query?.verify_status) === 0 ? true : false
      $getRechargeInfo({
        order_no: navigator?.route?.query?.order_no
      }).then((res: any) => {
        state.form.imgs = res.data?.voucher || [];
        state.form.remark = res.data?.remark || '';
      })
    })

    const radiochange = () => {
      if (Number(state.form.status) === 1) {
        state.form.isShow = true;
      } else {
        state.form.isShow = false;
      }
    }

    return () => (
      <Page>
        <CardWithTitle title="凭证审核">
          <LForm
            btns={["cancel", "confirm"]}
            v-model={state.form}
            onCancel={() => {
              cancelHandler();
            }}
            onConfirm={(e: any) => {
              confirmHandler(e.done);
            }}
          >
            <LFormItem label="凭证" prop="imgs">
              <a-image-preview-group>
                {
                  state.form.imgs.map((item: any) => (
                    <div class={styles.img}><a-image width={180} src={item} class={styles.img}></a-image></div>
                  ))
                }
              </a-image-preview-group>
            </LFormItem>
            {
              state.form.verify_status && <LFormItem label="状态" prop="status">
                <a-radio-group
                  v-model:value={state.form.status}
                  name="radioGroup"
                  onchange={() => { radiochange() }}
                >
                  <a-radio value={1}>审核通过</a-radio>
                  <a-radio value={-1}>审核不通过</a-radio>
                </a-radio-group>
              </LFormItem>
            }
            {
              ( state.form.isShow && state.form.verify_status )  && <LFormItem label="充值金额" prop="account_data">
                <a-input-number id="inputNumber" v-model:value={state.form.account_data} placeholder="请输入充值金额..." style={{ width: "200px" }} min={1}/>
              </LFormItem>
            }
            <LFormItem label="备注信息" prop="remark">
              <a-textarea v-model:value={state.form.remark} placeholder="请输入备注..." style={{ width: "250px" }} disabled={!state.form.verify_status}/>
            </LFormItem>
          </LForm>
        </CardWithTitle>
      </Page>
    )
  }
})